<template>
  <view class="content">
    <view class="title">{{ detail.name }}</view>
    <view class="title-bread">
      <text>发布人：{{ detail.userName }}</text>
      <text>发布时间：{{ detail.createTime | time }}</text>
    </view>
    <view class="borderB"></view>
    <view class="actContent">
      <view class="actContent-p">{{ detail.remark }}</view>
    </view>
    <view class="bottom-btn" v-if="this.detail.timeStatus !== 'dead'">
      <view class="enroll-btn" :class="{btncolor: this.detail.isJoin}" @click="handleEnrollFunc">{{this.detail.isJoin === 1?'已报名':'立即报名'}}</view>
      <view class="sign-btn" :class="{isSigncolor: this.detail.isSign}" @click="handleSignFunc">{{this.detail.isSign === 1?'已签到':'立即签到'}}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      AcceptData: {},
      detail: {}
    };
  },
  onLoad(event) {
    this.AcceptData = JSON.parse(decodeURIComponent(event.detailDate));
    //详情标题
  },
  mounted () {
    this.getActDetail(this.AcceptData.actId)
  },
  methods: {
    getActDetail (id) {
      let _this = this
      this.$api.getActDetail(id).then(res => {
        if (res && res.code === '200') {
          let data = res.data
          this.detail = Object.assign(this.AcceptData, data);
          console.log(this.detail)
          uni.setNavigationBarTitle({
            title: this.detail.name
          });
        }
       })
    },
    handleEnrollFunc() {
      if (this.detail.isJoin === 0) {
        this.$api.userJoin(this.detail.cid).then(res => {
          if (res && res.code === '200') {
            uni.showToast({
              title: '报名成功',
              icon: 'none'
            });
            this.$set(this.detail, 'isJoin', 1)
          }
        });
      } else {
        uni.showToast({
          title: '您已经报名',
          icon: 'none'
        });
      }
    },
    handleSignFunc() {
      if (this.detail.isJoin === 0) {
        uni.showToast({
          title: '请先报名',
          icon: 'none'
        });
        return false
      }
      if (this.detail.isSign === 0) {
        this.$api.userSign(this.detail.cid).then(res => {
          if (res && res.code === '200') {
            uni.showToast({
              title: '签到成功',
              icon: 'none'
            });
            this.$set(this.detail, 'isSign', 1)
          }
        });
      } else {
        uni.showToast({
          title: '您已经签到',
          icon: 'none'
        });
      }
    }
  },
  filters: {
    time(time) {
      let dt = time;
      if (!dt || isNaN(parseInt(dt))) return '';
      let date = new Date(parseInt(dt));
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? '0' + MM : MM;
      let d = date.getDate();
      d = d < 10 ? '0' + d : d;
      return y + '-' + MM + '-' + d;
    }
  }
};
</script>

<style scoped>
.title {
  padding: 10rpx 27rpx;
  line-height: 60rpx;
  font-size: 38rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
.title-bread {
  padding: 10upx 27rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  color: rgba(160, 160, 160, 1);
}
.title-bread text {
  padding-right: 107upx;
}
.actContent {
  padding: 10upx 27rpx 120upx;
  line-height: 40upx;
  font-size: 24upx;
  font-family: Source Han Sans CN;
  color: rgba(100, 100, 100, 1);
}
.actContent-p img {
  display: block;
  max-width: 90%;
  margin: 0 auto;
}
.bottom-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  box-shadow: 0upx 3upx 16upx 0upx rgba(0, 0, 0, 0.28);
  font-size: 0;
}
.bottom-btn view {
  display: inline-block;
  width: 50%;
  height: 100upx;
  line-height: 100upx;
  font-size: 32upx;
  font-family: Source Han Sans CN;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
.sign-btn {
  background: #00b7ee;
}
.enroll-btn {
  background: #ff6d0b;
}
.borderB {
  width: 92%;
  margin: 0px auto;
  border-bottom: 1px solid #dbdbdb;
}
.btncolor {
  background: rgba(255,109,11,0.5);
}
.isSigncolor {
  background: rgba(0,183,238, 0.5);
}
</style>
